<template>
  <div class="bg-content">
    <div class="nav"></div>
    <div class="header">
      <div class="personal">
        <div class="logImg" v-if="list.avatar">
          <img :src="list.avatar" alt="" />
        </div>
        <div class="logImg" v-else>
          <img src="../../../../assets/img/main/yisheng.png" alt="" />
        </div>
        <div class="tittle">
          <div class="title-head">
            <div class="name">{{ list.doctorName }}</div>
            <div class="level">{{ list.doctorTitle }}</div>
          </div>
          <div class="hospitalName">{{ departmentName }}</div>
        </div>
        <div
          style="background-color:gray;"
          v-if="colstate"
          class="follow"
          @click="appointmentcancel()"
        >
          已关注
        </div>
        <div v-else class="follow" @click="appointment()">关注</div>
      </div>
      <div class="info">
        <div class="numinfo">
          <div class="appointment">
            预约数 <span>{{ list.ghnum }}</span>
          </div>
          <!-- <div class="Interrogation">
            问诊量 <span>{{ list.ghnum }}</span>
          </div> -->
          <div class="fans">
            粉丝量 <span>{{ list.followNum }}</span>
          </div>
        </div>
        <div class="beGood">
          <div class="nav-title">擅长: {{ list.goodAt }}</div>
          <div class="nav-title-info" @click="makeInfo()">详情></div>
          <van-popup
            v-model="show"
            closeable
            round
            position="bottom"
            :style="{ height: '80%' }"
          >
            <div class="info-message">
              <div class="message-title">介绍详情</div>
              <div class="message-content">
                <div class="message-content-head">擅长</div>
                <div class="p-message" v-if="list.goodAt">
                  {{ list.goodAt }}
                </div>
                <div class="p-message" v-else>
                  无
                </div>
              </div>
              <div class="brief">
                <div class="brief-head">简介</div>
                <div class="brief-content">
                  {{ list.detail }}
                </div>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
    <div class="time">
      <div class="time-title">
        <div class="Department">选择科室【{{ classq }}】</div>
        <div class="choice" @click="doChoice">选择科室></div>
        <van-popup
          v-model="dialog"
          closeable
          position="bottom"
          :style="{ height: '40%' }"
        >
          <div class="department-title">
            <div class="department-name">选择科室</div>
            <div class="line"></div>
            <div class="area">
              <div class="area-name">
                <van-radio-group v-model="radio">
                  <van-radio
                    :name="index"
                    checked-color="#07C6B4"
                    v-for="(item, index) in list.treatDeptList"
                    :key="item.departmentId"
                    icon-size="12px"
                    class="area-name-list"
                    @click="radioIn(item.departmentName, item.departmentId)"
                    >{{ item.departmentName }}</van-radio
                  >
                </van-radio-group>
              </div>
            </div>
            <div class="btn" @click="determine()">确定</div>
          </div>
        </van-popup>
      </div>
      <div class="choice-time">
        <div class="time-content">
          <ul>
            <li
              v-for="(dTime, index) in doctorDay"
              :key="index"
              :class="{ bgColorChange: bgColor == dTime.date }"
              @click="dayChoose(dTime)"
            >
              <div class="ename">
                {{ dTime.date.substring(5, 10) }}
              </div>
              <div class="num-name">{{ dTime.week }}</div>
              <div class="Number" v-if="dTime.isHasSource > 0">有号</div>
              <div class="Number2" v-else>无号</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="time-header">
        <div class="line"></div>
        <div class="time-message">
          <div
            class="cellTime"
            @click="chooseTime(item.sourceId, item.treatDate)"
            v-for="item in ByDate"
            :key="item.sourceId"
          >
            <div class="cellLeft">
              {{ item.treatDate }}{{ item.treatWeek }}{{ item.sourceTypeName }}
            </div>
            <div class="cellRight">余号{{ item.leftNum }}<span>></span></div>
          </div>
          <div class="line"></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <van-popup
        v-model="timeShow"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
      >
        <div class="time-head">
          <div class="time-head-title">{{ titleList.treatDate }}</div>
          <div class="time-head-title">{{ titleList.treatWeek }}</div>
          <div class="time-head-title">{{ titleList.sourceTypeName }}</div>
        </div>
        <div class="time-head-hospital">
          {{ titleList.hospitalName }}({{ titleList.departmentName }})
        </div>
        <div class="time-head-list">
          <ul>
            <li
              v-for="(item, index) in titleList.timeIntervalList"
              :key="item.timeIntervalId"
              :class="{ bgColorChange: changefirst == item.timeIntervalId }"
              @click="changeft(item)"
            >
              <p class="p1">{{ item.sourceTimeDesc }}</p>
              <p class="p2">
                ({{ item.remainNumber }}/{{ item.timeIntervalLimitNum }})
              </p>
            </li>
          </ul>
        </div>
        <div class="Submit" @click="submit()">提交</div>
      </van-popup>
    </div>
  </div>
  <!-- </div> -->
</template>
<script>
import {
  getDoctorDetailsApi,
  getDoctDetailDateApi,
  getDoctDetailByDateApi,
  getSourceTimeIntervalApi,
  collectApi
} from "@/service/api.js";
import {
  loginByWxOpenidApi,
  cancelcollectApi,
  getUserinfoApi,
  addtypeApi
} from "@/service/api.js";
import { Cell, CellGroup, Popup } from "vant";
import { Collapse, CollapseItem } from "vant";
import { RadioGroup, Radio } from "vant";
import { Toast } from "vant";
import { Dialog } from "vant";

export default {
  name: "index",
  inject: ["reload"],

  data() {
    return {
      id: "", //科室id
      departmentName: "", //科室名称
      doctorId: "", //医生id
      sourceId: "", //号源id
      apptoken: "",
      token: "",
      treatDate: "",
      titleList: {}, //弹窗title信息
      dayRight: "", // 上午余号
      afterRight: "", //下午余号
      day: "请选择日期", //上午
      dayAfter: "请选择日期", //下午
      bgColor: "-1", //选择日期
      class: "",
      classq: "", //科室
      change: "-1", //改变颜色
      changefirst: "-1", //改变颜色
      radio: "", //选择科室
      class: "", //
      dialog: false, //选择科室弹窗
      show: false, //详情弹窗
      timeShow: false,
      activeName: "0", //选择时间上午下拉框
      activeName2: "0", //选择时间下午下拉框
      areaList: [],
      list: {},
      timeList: [],
      doctorDay: [],
      timeIntervalId: "",
      ByDate: [], //
      name: "", //医生姓名
      hspNme: "", //医院名称
      time: "", //号源时间
      year: "", //年月日
      msg: "", //提示信息
      doctorleval: "", //医生等级
      week: "",
      openid: "",
      unid: "",
      departmentId: "",
      keshilist: [], //周?,,
      colstate: "",
      userinfo: ""
    };
  },
  created() {
    // 拿取apptoken
    localStorage.getItem("apptoken"),
      (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      console.log(this.apptoken);
    // 拿取token
    this.token = localStorage.getItem("token");

    console.log("token", this.token);
    this.doctorId = this.$route.query.doctorId;
    this.id = this.$route.query.departmentId;
    this.sourceId = this.$route.query.sourceId;
    if (this.id) {
    } else {
      this.id = JSON.parse(localStorage.getItem("departmentId"));
      // Toast("本地"+this.id)
    }
    if (this.sourceId) {
      this.doctorId = this.$route.query.doctorId;
      this.bgColor = this.$route.query.treatDate;

      this.id = this.$route.query.departmentId;
      this.getDoctor();
      this.getDoctorDay();
      this.treatDate = this.$route.query.treatDate;
      this.getDoctorList();
      this.chooseTime(this.sourceId, this.treatDate);
    } else {
      this.getDoctor();
      this.getDoctorDay();
    }
    if (this.doctorId) {
      console.log(this.doctorId);
      // Toast("链接"+this.doctorId)
    } else {
      this.doctorId = JSON.parse(localStorage.getItem("doctorid"));
    }

    // this.close();
  },
  methods: {
    //获取医生详情
    getuserinfo() {
      if (this.token) {
        let apptoken = JSON.parse(localStorage.getItem("apptoken"));
        console.log(this.apptoken);
        getUserinfoApi({
          token: this.token,
          apptoken: apptoken
        }).then(res => {
          // console.log(res)
          if (res.code == 4000) {
            this.userinfo = res.data;
            //提交

            // var msg = "";
            // if (this.classq == "") {
            //   msg = "请选择科室";
            //   Toast.fail("请选择科室");
            // }
            // if (this.time == "") {
            //   msg = "请选择时间";
            //   Toast.fail("请选择时间");
            // }
            // // console.log(this.classq);
            // // console.log(this.time);
            // // console.log(this.msg);
            // let info = {
            //   name: this.name, //医生姓名
            //   hspNme: this.hspNme, //医院名称
            //   time: this.time, //号源时间
            //   date: this.year, //年月日
            //   classq: this.classq, //科室
            //   doctorleval: this.doctorleval, //医生等级
            //   week: this.week, //周?
            //   sourceId: this.sourceId, //号源id
            //   timeIntervalId: this.timeIntervalId,
            //   treatfee: this.titleList.treatFee,
            //   registerFee: this.titleList.registerFee
            // };
            // localStorage.setItem("info", JSON.stringify(info));
            // if (msg == "") {
            if (this.userinfo) {
              if (this.userinfo.list.length > 0) {
                this.$router.push({
                  name: "Appointment_message",
                  query: {
                    doctorId: this.doctorId,
                    departmentId: this.id
                  }
                });
              } else {
                Dialog.confirm({
                  title: "提示",
                  message: "您还未添加就诊人，是否添加？"
                })
                  .then(() => {
                    //添加就诊人
                    let apptoken = JSON.parse(localStorage.getItem("apptoken"));

                    addtypeApi({
                      apptoken: apptoken,
                      token: this.token
                    }).then(res => {
                      console.log(res);
                      if (res.code == 4000) {
                        if (res.data.isJumpHealthCard == 0) {
                          //改这里
                          this.$router.push({
                            name: "add_doctor"
                          });
                        } else if (res.data.isJumpHealthCard == 1) {
                          window.location = res.data.link;
                        }
                      }
                    });
                    // on confirm
                  })
                  .catch(() => {
                    // on cancel
                  });
              }
            } else {
              Dialog.confirm({
                title: "提示",
                message: "需前往登录页面完成登录"
              })
                .then(() => {
                  this.$router.push({
                    name: "login"
                  });
                  // on confirm
                })
                .catch(() => {
                  // on cancel
                });
            }
          }
          if (res.code == 4002) {
            window.localStorage.removeItem("token");
            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
            // }
          } else if (res.code == 4002) {
            window.localStorage.removeItem("token");
            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Toast(res.msg);
          }
        });
      } else {
        Dialog.confirm({
          title: "提示",
          message: "需前往登录页面完成登录"
        })
          .then(() => {
            this.$router.push({
              name: "login"
            });
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    getDoctor() {
      getDoctorDetailsApi({
        doctorId: this.doctorId,
        apptoken: this.apptoken,
        token: this.token,
        departmentId: this.id
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);
          this.list = res.data;
          console.log(this.list);
          this.name = this.list.doctorName;
          this.hspNme = this.list.HospitalName;
          this.doctorleval = this.list.doctorTitle;
          this.keshilist = this.list.treatDeptList;
          let obj = this.keshilist.find(item => item.departmentId === this.id);
          this.classq = obj.departmentName;
          console.log(this.hspNme);
          console.log(this.name);
          console.log(this.departmentName);
          this.colstate = res.data.isCollect;
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    //获取医生日历
    getDoctorDay() {
      getDoctDetailDateApi({
        departmentId: this.id,
        doctorId: this.doctorId,
        apptoken: this.apptoken,
        token: this.token
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);

          this.doctorDay = res.data.list;
          console.log(this.doctorDay);
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    //根据日期查列表
    getDoctorList() {
      getDoctDetailByDateApi({
        departmentId: this.id,
        treatDate: this.treatDate,
        apptoken: this.apptoken,
        doctorId: this.doctorId,
        token: this.token
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          this.ByDate = res.data.treatTimeData;
          console.log(this.ByDate);
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    //判断关注
    //     checkcol(){
    // collectApi({
    //     token:this.token,
    //     apptoken:this.apptoken,
    //     doctorId:this.doctorId,
    //     departmentId:this.id
    //     }).then(res=>{
    //       console.log(res)
    //      this.colcode=res.code
    //     })
    //     },
    // 关注
    appointment() {
      if (this.token) {
        collectApi({
          token: this.token,
          apptoken: this.apptoken,
          doctorId: this.doctorId,
          departmentId: this.id
        }).then(res => {
          console.log(res);
          if (res.code == 4000) {
            Toast("关注成功");
            //  this.getDoctor()
            this.colstate = true;
            this.list.followNum++;
          } else if (res.code == 4002) {
            window.localStorage.removeItem("token");
            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Toast(res.msg);
          }
        });
      } else {
        Dialog.confirm({
          title: "提示",
          message: "需前往登录页面完成登录"
        })
          .then(() => {
            this.$router.push({
              name: "login"
            });
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //取消收藏
    appointmentcancel() {
      cancelcollectApi({
        token: this.token,
        apptoken: this.apptoken,
        doctorId: this.doctorId,
        departmentId: this.id
      }).then(res => {
        if (res.code == 4000) {
          Toast("已取消");
          //  this.getDoctor()
          this.colstate = false;
          this.list.followNum--;
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
      });
    },
    // 打开详情
    makeInfo() {
      this.show = true;
    },
    // 选择日期
    dayChoose(item) {
      this.treatDate = item.date;
      this.bgColor = item.date;
      getDoctDetailByDateApi({
        departmentId: this.id,
        treatDate: this.treatDate,
        apptoken: this.apptoken,
        doctorId: this.doctorId,
        token: this.token
      }).then(res => {
        console.log(res);
        if (res.code == 4000) {
          this.ByDate = res.data.treatTimeData;
        } else if (res.code == 4002) {
          window.localStorage.removeItem("token");
          Dialog.confirm({
            title: "提示",
            message: "需前往登录页面完成登录"
          })
            .then(() => {
              this.$router.push({
                name: "login"
              });
              // on confirm
            })
            .catch(() => {
              // on cancel
            });
        } else {
          Toast(res.msg);
        }
        console.log(this.ByDate);
      });
    },

    // 刷新选中
    // close() {
    //   if ((this.timeShow == false)) {
    //     this.changefirst = -1;
    //     console.log(1);
    //   }
    // },
    //选择时间上午
    changeft(item) {
      this.timeIntervalId = item.timeIntervalId;
      this.changefirst = item.timeIntervalId;
      this.time = item.sourceTimeDesc;
    },
    chooseTime(id, day) {
      console.log(id);
      console.log(day);
      this.year = day;
      console.log(this.year);
      this.sourceId = id;
      // 根据号源调取小时段信息
      getSourceTimeIntervalApi({
        sourceId: this.sourceId,
        apptoken: this.apptoken,
        token: this.token
      }).then(res => {
        if (res.code == 4000) {
          this.changefirst = -1;
          this.timeShow = true;
          console.log(res);
          this.titleList = res.data;
          console.log(this.titleList.timeIntervalList);
          this.timeList = this.titleList.timeIntervalList;
        } else {
          if (res.code == 4002) {
            window.localStorage.removeItem("token");
            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Toast(res.msg);
          }
          this.timeShow = false;
          // Toast(res.msg)
        }
      });
    },
    submit() {
      // this.getuserinfo();
      var msg = "";
      if (this.classq == "") {
        msg = "请选择科室";
        Toast.fail("请选择科室");
      }
      if (this.time == "") {
        msg = "请选择时间";
        Toast.fail("请选择时间");
      }
      // console.log(this.classq);
      // console.log(this.time);
      // console.log(this.msg);
      let info = {
        name: this.name, //医生姓名
        hspNme: this.hspNme, //医院名称
        time: this.time, //号源时间
        date: this.year, //年月日
        classq: this.classq, //科室
        doctorleval: this.doctorleval, //医生等级
        week: this.week, //周?
        sourceId: this.sourceId, //号源id
        timeIntervalId: this.timeIntervalId,
        treatfee: this.titleList.treatFee,
        registerFee: this.titleList.registerFee
      };
      localStorage.setItem("info", JSON.stringify(info));

      if (msg == "") {
        this.$router.push({
          name: "Appointment_message",
          query: {
            doctorId: this.doctorId,
            departmentId: this.id
          }
        });
      }
    },
    // 跳转患者评价
    goevaluate() {
      this.$router.push({
        name: "evaluate"
      });
    },
    // 选择科室
    doChoice() {
      this.dialog = true;
    },
    // 确定科室
    determine() {
      this.dialog = false;
      this.classq = this.class;
      this.msg = "";
      this.getDoctorDay();
      this.bgColor = "-1";
      this.ByDate = [];
      // this.getDoctDetailByDateApi()
    },
    // 选择科室
    radioIn(e, id) {
      console.log(e);
      console.log(id);
      this.id = id;
      this.class = e;
      // this.getDoctorDay()
      // this.bgColor="-1"
    }
  }
};
</script>
<style lang="scss" scoped>
.van-popup--bottom {
  width: 10rem;
  left: calc(50% - 5rem);
}
// 时间段弹窗样式
.time-head {
  display: flex;
  .time-head-title {
    margin-left: 0.2rem;
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
    font-size: 0.4rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
.time-head-hospital {
  margin-left: 0.2rem;
  font-size: 0.35rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-bottom: 0.3rem;
}
.time-head-list {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  margin-bottom: 0.8rem;
  padding-bottom: 1rem;
  ul {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    li {
      margin-bottom: 0.2rem;
      width: 2.2rem;
      height: 1.2rem;
      background: #ffffff;
      border: 1px solid #a0a0a0;
      margin-left: 0.1rem;
      border-radius: 0.1rem;
      font-size: 0.35rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      text-align: center;
      .p1 {
        margin-top: 0.1rem;
      }
    }
    .bgColorChange {
      background: #07c6b4;
      color: #ffffff;
    }
  }
}
.Submit {
  position: fixed;
  bottom: 0.5rem;
  width: 5rem;
  left: calc(50% - 2.5rem);

  height: 1rem;
  background: #07c6b4;
  border-radius: 0.1rem;
  margin: 0 auto;
  font-size: 0.45rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 1rem;
  text-align: center;
}
.van-cell__value {
  color: #07c6b4 !important;
}
.department-title {
  position: relative;
  .department-name {
    margin-left: 156px;
    padding-top: 15px;
    margin-bottom: 15px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    // line-height: 21px;
  }
  .area {
    .area-name {
      .area-name-list {
        // width: 200px;
        margin-left: 17px;
        margin-top: 24px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 50px;
        // line-height: 21px;
      }
    }
  }
  .btn {
    position: fixed;
    left: 21px;
    bottom: 10px;
    width: 332px;
    height: 27px;
    background: #07c6b4;
    border-radius: 5px;
    margin: 0 auto;
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 27px;
    text-align: center;
    margin-bottom: 10px;
  }
}
.item-box {
  width: 100%;
  height: 100px;
}
.van-collapse-item__content {
  width: 100%;
  height: 100%;
}
.info-message {
  margin-top: 20px;
  margin-left: 16px;
  .message-title {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 25px;
  }
  .message-content {
    margin-bottom: 43px;
    .message-content-head {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-bottom: 13px;
    }
    .p-message {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      width: 100%;
      // height: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .brief {
    .brief-head {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-bottom: 12.5px;
    }
    .brief-content {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
.bg-content {
  width: 100%;
  background: #f6f6f6;
  margin-top: 1rem;
}

.header {
  // height: 151px;
  // margin-bottom: 10px;
  padding-top: 0.2rem;
  background-color: #ffffff;
  .personal {
    height: 2rem;
    display: flex;
    .logImg {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      //   background-color: blueviolet;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .tittle {
      margin-left: 0.2rem;
      width: 55%;
      .title-head {
        // display: flex;
        margin-top: 0.2rem;

        .name {
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          font-weight: bold;
        }
        .level {
          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          margin-top: 0.05rem;
        }
        .Obstetrics {
          margin-left: 0.1rem;

          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
      .hospitalName {
        font-size: 0.3rem;
        font-family: PingFang SC;
        margin-top: 0.1rem;
        font-weight: 500;
        color: #999999;
      }
    }
    .follow {
      width: 2rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      background: #07c6b4;
      border-radius: 0.1rem;
      font-size: 0.3rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;

      margin-top: 0.5rem;
    }
  }
  .info {
    .numinfo {
      display: flex;
      margin-bottom: 0.1rem;
      .appointment {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 0.2rem;
        span {
          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: coral;
        }
      }
      .Interrogation {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 0.2rem;
        span {
          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: coral;
        }
      }
      .fans {
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-left: 0.4rem;
        span {
          font-size: 0.3rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: coral;
        }
      }
    }
    .beGood {
      display: flex;
      justify-content: space-between;
      flex-flow: row nowrap;
      .nav-title {
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 0.6rem;
        color: #333333;
        margin-left: 0.2rem;
        width: 7.5rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .nav-title-info {
        font-size: 0.35rem;
        margin-right: 0.2rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
      }
    }
  }
}
.time {
  width: 100%;
  // height: 229px;
  margin-bottom: 0.1rem;
  background-color: #ffffff;
  .time-title {
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    margin-bottom: 0.2rem;
    padding-top: 0.2rem;
    line-height: 0.6rem;
    .Department {
      font-size: 0.35rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-left: 0.2rem;
    }
    .choice {
      font-size: 0.3rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #07c6b4;
      margin-right: 0.2rem;
    }
  }
  .choice-time {
    overflow: auto;
    display: flex;
    .time-content {
      // width: 100%;
      padding-left: 0.2rem;
      margin-bottom: 0.2rem;
      ul {
        overflow: auto;
        display: flex;
        overflow-x: auto;
        .bgColorChange {
          background: #07c6b4;
          color: #ffffff;
        }
        li {
          // display: inline-block;
          width: 1.5rem;
          height: 2rem;
          background: #f5f5f7;
          border-radius: 0.1rem;
          text-align: center;
          margin-right: 0.2rem;
          .ename {
            font-size: 0.3rem;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 0.65rem;
          }
          .num-name {
            width: 1.5rem;
            font-size: 0.3rem;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 0.6rem;
          }
          .Number {
            width: 1rem;
            height: 0.45rem;
            background: #ffffff;
            border-radius: 0.1rem;
            text-align: center;
            line-height: 0.45rem;
            color: #07c6b4;
            margin: 0.1rem auto;
            font-size: 0.3rem;
          }
          .Number2 {
            width: 1rem;
            height: 0.45rem;
            background: #ffffff;
            border-radius: 0.1rem;
            text-align: center;
            line-height: 0.45rem;
            color: #cccccc;
            margin: 0.1rem auto;
            font-size: 0.3rem;
          }
        }
        .bgColorChange {
          background: #07c6b4;
          color: #ffffff !important;
        }
      }
    }
  }
  .line {
    width: 10rem;
    border-bottom: 0.05rem solid #f6f6f6;
    margin: 0 auto;
  }
  .time-message {
    .cellTime {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      margin-left: 0.2rem;
      margin-right: 0.2rem;
      height: 1.3rem;
      .cellLeft {
        font-size: 0.43rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 1.3rem;
      }
      .cellRight {
        font-size: 0.42rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #07c6b4;
        line-height: 1.3rem;
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
